        </div> <!-- Close admin-content -->

        <!-- Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        
        <!-- Admin Dashboard Scripts -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const sidebar = document.querySelector('.admin-sidebar');
                const navbar = document.querySelector('.admin-navbar');
                const content = document.querySelector('.admin-content');
                const sidebarToggle = document.querySelector('#sidebarToggle');

                // Sidebar Toggle
                sidebarToggle.addEventListener('click', function() {
                    sidebar.classList.toggle('collapsed');
                    navbar.classList.toggle('sidebar-open');
                    content.classList.toggle('sidebar-collapsed');

                    // For mobile
                    sidebar.classList.toggle('mobile-open');
                });

                // Close sidebar on mobile when clicking outside
                document.addEventListener('click', function(e) {
                    if (window.innerWidth <= 768) {
                        if (!sidebar.contains(e.target) && !sidebarToggle.contains(e.target)) {
                            sidebar.classList.remove('mobile-open');
                        }
                    }
                });

                // Add fade-in animation to content
                content.classList.add('fade-in');

                // Add slide-in animation to cards
                document.querySelectorAll('.card').forEach(card => {
                    card.classList.add('slide-in');
                });
            });
        </script>
    </body>
</html> 